<!--
 * @Descripttion: 邀约页面排版页
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-08 13:40:01
 * @LastEditors: GW
 * @LastEditTime: 2021-12-01 10:03:02
-->
<template>
    <nly-content-wrapper class="activity content-warpper-2">
        <div class="content-header-2">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="add">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="editFilesFrom">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">编辑</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="deleteFrom">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="getListData">
                                <a-icon class="btns-icon" type="file-sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                        <!-- <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="search">
                                <a-icon class="btns-icon" type="file-search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col> -->
                    </a-col>
                </a-row>
            </div>
            <!--内容-->
            <section>
                <!-- 列表 -->
                <a-table class="invite-table" :loading="loading" :columns="columns" :components="components" :data-source="dataSource" :scroll="{ y: 500,x:100}" bordered :pagination="pagination" @change="onTableChange" :row-selection="{selectedRowKeys: selectedKeys, onChange: selectionChange,columnWidth:30}">
                    <template slot="share" slot-scope="text,record">
                        <div @click="handleShare(record.id)" class="shart-class">
                            <a-icon type="share-alt" />
                        </div>
                    </template>
                    <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                    <div slot="activityName" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                        <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="requestData[column.dataIndex]" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                        <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => handleResetSearch(clearFilters,column.dataIndex)">
                            重置
                        </a-button>
                        <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                            搜索
                        </a-button>
                    </div>
                </a-table>
            </section>

            <!--编辑表单容器-->
            <section class="edit-from-wrapper animate__animated" :class="animit?'animate__backInRight':'animate__backOutRight'" v-show="editFormVisible">
                <!--内容展示框-->
                <div class="content-edit-box" @click.self="clickContent">
                    <div class="edit-top-box">
                        <div class="edit-top-btn">
                            <!-- <a-button class="btn">预览</a-button> -->
                            <a-button type="primary" class="btn" @click="saveForm">保存</a-button>
                            <a-button type="danger" class="btn" @click="closeEditFormWrapper">关闭</a-button>
                        </div>
                    </div>
                    <!--操作-->
                    <div class="edit-content-operation">
                        <!--组件选择-->
                        <div class="choice-module-box">
                            <!-- <a-tabs default-active-key="1" :activeKey="activeKey" @change="tabsChange" class="choice-tabs" style="background:#FFF">
                                <a-tab-pane key="1">
                                    <span slot="tab">
                                        <a-icon type="appstore" />
                                        组件
                                    </span> -->
                            <div class="content-box">
                                <p>展示类组件</p>
                                <ul class="item-ul" @dragstart="dragStartTitle" @ondrag="onDragTitle" @dragend="dragEndTitle">
                                    <li v-for="(item) in  moduleList.filter(d=>{return d.group == 0})" :style="item.status==1?{'background':'#eee','color':'#888'}:''" :key="item" :data-type="item.type" :draggable="item.status==0?true:false" @click="clickTitle(item)">
                                        <a-icon :type="item.icon" class="icon-btn" /> {{item.title}}
                                    </li>
                                </ul>
                                <p>填写类组件</p>
                                <ul class="item-ul" @dragstart="dragStartTitle" @ondrag="onDragTitle" @dragend="dragEndTitle">
                                    <li v-for="(item) in  moduleList.filter(d=>{return d.group == 1})" :key="item" :data-type="item.type" draggable @click="clickTitle(item)">
                                        <a-icon :type="item.icon" class="icon-btn" /> {{item.title}}
                                    </li>
                                </ul>
                                <p>联系人组件</p>
                                <ul class="item-ul" @dragstart="dragStartTitle" @ondrag="onDragTitle" @dragend="dragEndTitle">
                                    <li v-for="(item) in  moduleList.filter(d=>{return d.group == 2})" :style="item.status==1?{'background':'#eee','color':'#888'}:''" :key="item" :data-type="item.type" :draggable="item.status==0?true:false" @click="clickTitle(item)">
                                        <a-icon :type="item.icon" class="icon-btn" /> {{item.title}}
                                    </li>
                                </ul>
                            </div>
                            <!-- </a-tab-pane>
                            </a-tabs> -->
                        </div>
                        <!--展现视图-->
                        <div class="phone-view">
                            <div class="phone-img">
                                <img :src="phoneimg" alt="">
                            </div>
                            <div class="view-content" @drop="dropBox" @dragover="dragOverTitle" @dragleave="dragLeaveTitle">
                                <div class="view-header" v-if="viewArray[0].onOff" :class="onClickModuleIndex == 0?'view-header-active':''" :style="{'background':viewArray[0].background}" @click.stop="viewTitleClick" :data-index="0">
                                    <div class="view-img-upload">
                                        <img v-if="header.logo" class="view-logo" :src="header.logo" :data-index="0">
                                        <a-icon v-else class="view-logo" type="picture" :data-index="0" />
                                    </div>
                                    <span class="view-title" :data-index="0" :style="{'color':viewArray[0].bgColor}">{{header.title}}</span>
                                    <span class="view-remark" :data-index="0">{{header.remarks}}</span>
                                </div>
                                <Draggable v-model="viewArray" draggable=".view-component" @change="viewArrayChange" ghost-class="ghost" chosen-class="chosen" :options="{'animation':450}">
                                    <template v-for="(item,index) in viewArray">
                                        <div class="view-component" v-if="index > 0" @mousemove="mousemoveModule(index)" @mouseout="mouseoutModule" :class="moveModuleIndex==index?'view-move':''">
                                            <!-- 组件遮罩（作用：防止点击一些可操作的组件,改变样式结构）-->
                                            <div :class="onClickModuleIndex == index?'view-mask-click':'view-mask'" @click.stop="clickModule(item,index)" :data-index="index">
                                                <div class="view-close" @click.stop="deleteModule(index,item.type)">
                                                    <a-icon class="close-btn" type="close" />
                                                </div>
                                            </div>
                                            <!-- 拖动未释放的时候展示 -->
                                            <template v-if="item.status && item.status == 2">
                                                <div class="view-filter">
                                                    <component :is="moduleList.filter(e=>{return e.type == item.type}).length > 0?moduleList.filter(e=>{return e.type == item.type})[0].component:''" :data="item" :moduleList="moduleList"></component>
                                                </div>
                                            </template>
                                            <!--各种拖拽组件的展现-->
                                            <template v-else>
                                                <component :is="moduleList.filter(e=>{return e.type == item.type}).length > 0?moduleList.filter(e=>{return e.type == item.type})[0].component:''" :data="item" :moduleList="moduleList"></component>
                                            </template>
                                        </div>
                                    </template>
                                </Draggable>
                                <div v-if="viewArray.length == 1" class="tips-box">
                                    点击左侧组件开始制作表单
                                </div>
                                <div class="btn-bbox">
                                    <div class="btn">
                                        <a-button class="btn-submit" type="primary" @click="submitForm" size="large">
                                            提交
                                        </a-button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!--组件操作-->
                        <div class="choice-module-box">
                            <a-tabs default-active-key="1" :activeKey="activeKey" @change="tabsChange" class="choice-tabs" style="background:#FFF">
                                <a-tab-pane key="1">
                                    <span slot="tab">
                                        <a-icon type="form" />
                                        编辑
                                    </span>
                                    <div class="edit-main-wrapper">
                                        <Edits v-if="tempIndex" :type="currentModule" :data="onClickModuleData"></Edits>
                                        <div v-else class="module-null">
                                            <a-icon class="ico" type="inbox" />
                                            <p>请选择需要编辑的内容</p>
                                        </div>
                                    </div>
                                </a-tab-pane>
                                <a-tab-pane key="2">
                                    <span slot="tab">
                                        <a-icon type="setting" />
                                        属性设置
                                    </span>
                                    <div style="padding:10px 10px 0px;" class="form-model-box">
                                        <a-form-model :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }">
                                            <a-form-model-item label="活动名称" :rules="[{ required: true, message: '',trigger:'input'}]">
                                                <a-select show-search v-model="activityId" placeholder="Select a person" option-filter-prop="children" :filter-option="filterOption" @focus="handleFocus" @blur="handleBlur" @change="handleActivityChange">
                                                    <a-select-option v-for="item in activityList" :key="item.id" :value="item.id">
                                                        {{item.activityTitle}}
                                                    </a-select-option>
                                                </a-select>
                                            </a-form-model-item>
                                            <a-form-model-item label="表单名称" :rules="[{ required: true, message: '',trigger:'input'}]">
                                                <a-input v-model.trim="formName" placeholder="请输入表单名称"></a-input>
                                            </a-form-model-item>
                                        </a-form-model>
                                    </div>

                                    <Header :data="viewArray[0]"></Header>
                                </a-tab-pane>
                            </a-tabs>
                        </div>
                    </div>

                </div>
            </section>

            <!--新增表单弹窗-->
            <drag-modal v-model="choiceVisible" title="选择活动" @cancel="()=>{choiceVisible=false}" :width="600">
                <a-form-model :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
                    <a-form-model-item label="活动名称" :rules="[{ required: true, message: '',trigger:'input'}]">
                        <a-select show-search v-model="activityId" placeholder="Select a person" option-filter-prop="children" :filter-option="filterOption" @focus="handleFocus" @blur="handleBlur" @change="handleActivityChange">
                            <a-select-option v-for="item in activityList" :key="item.id" :value="item.id">
                                {{item.activityTitle}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="表单名称" :rules="[{ required: true, message: '',trigger:'input'}]">
                        <a-input v-model.trim="formName" placeholder="请输入表单名称"></a-input>
                    </a-form-model-item>
                </a-form-model>

                <template slot="footer">
                    <a-button type="primary" @click="submitActivity">确认</a-button>
                    <a-button @click="()=>{choiceVisible=false}" class="margin-left-10">关闭</a-button>
                </template>
            </drag-modal>

            <!--分享弹窗-->
            <drag-modal v-model="shareVisible" title="活动发布" @cancel="()=>{shareVisible=false}" :width="300" :destroyOnClose="true">
                <div class="share-modal-box">
                    <div ref="qrCodeUrl">

                    </div>
                    <a-button class="btn" type="primary" @click="onCopy">复制地址</a-button>
                </div>
            </drag-modal>
        </div>
    </nly-content-wrapper>
</template>
<script>
import { mapState } from "vuex";
import { pageList } from "@/api/crm/activity";

import mixins from './mixins/publicFunction'
import header from './components/edit/header.vue';
import QRCode from "qrcodejs2";
import VueClipboard from "vue-clipboard2";
import phoneimg from "@/assets/iPhone7_PLUS.png"
Vue.use(VueClipboard);
import { saveFrom, getListFrom, removeFrom, getFilesDetail } from '@/api/activity/activity'

export default {
    components: { header },
    mixins: [mixins],
    data () {
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            phoneimg,
            //----------↑样式----------
            columns: [{
                title: '邀约表单名称',
                dataIndex: 'formName',
                key: "formName",
                width: 120,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '市场活动名称',
                dataIndex: 'activityName',
                width: 120,
                scopedSlots: {
                    filterDropdown: 'activityName',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '商机标题',
                dataIndex: 'businessTitle',
                width: 80,
            }, {
                title: '活动时间',
                dataIndex: 'beginDate',
                customRender: (text, record, index) => {
                    return `${text} ~ ${record.endDate}`
                },
                width: 160,
            }, {
                title: '状态',
                dataIndex: 'status',
                customRender: (text, record, index) => {
                    return text == 1 ? '已邀约' : text == 0 ? '未邀约' : '';
                },
                width: 60,
            }, {
                title: '业务员',
                dataIndex: 'salesman',
                width: 60,
            }, {
                title: '创建人',
                dataIndex: 'createUserName',
                width: 60,
            }, {
                title: '创建日期',
                dataIndex: 'createDate',
                width: 80,
            }, {
                title: '发布',
                dataIndex: '',
                align: 'center',
                scopedSlots: { customRender: 'share' },
                width: 60,
            }],
            dataSource: [],

            activityName: null,     //活动名称
            activityId: null,       //活动id
            activityData: {},        //活动数据
            formName: '',          //表单名称
            formId: null,            //表单id
            businessTitle: '',       //商机标题

            selectedKeys: [],
            selectedRows: [],

            //编辑容器
            editFormVisible: false,
            animit: false,//动画

            //新增表单
            choiceVisible: false,//选择活动弹窗
            activityList: [],//活动列表
            isPush: false, // 是否已添加组件

            //活动分享
            shareVisible: false,

            loading: false,
            requestData: {},//列表请求的数据

        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    created () {
        // 获取活动列表
        this.getActivityList();
        //获取表单列表
        this.getListData();
    },
    activated () {
        //获取表单列表
        this.getListData();
    },
    methods: {
        getActivityList () {
            // 获取活动列表
            let postData = {
                current: 1,
                size: -1
            }
            pageList(postData).then(response => {
                if (response.code === 200) {
                    this.activityList = response.data.records;
                } else {
                    // this.$message.warning(response.message)
                }
            }).catch(error => { });
        },
        handleActivityChange (val, data) {
            //活动选择
            console.log(val, data)
            this.activityId = val;
            this.activityData = this.activityList.filter(d => d.id == this.activityId)[0];//活动数据
            this.moduleList.forEach(item => {
                if (item.type == 'invitedate') {
                    item.status = 0;
                }
            });
        },
        submitActivity () {
            //确认活动
            if (!this.activityId) {
                this.$message.warning('请选择活动');
                return;
            }
            if (!this.formName) {
                this.$message.warning('请输入表单名称');
                return;
            }
            this.choiceVisible = false;
            this.editFormVisible = true;
            this.animit = true;
        },
        closeEditFormWrapper () {
            //关闭定制框
            let that = this;
            this.$confirm({
                title: '提示',
                content: '是否确认关闭表单',
                onOk () {
                    that.currentModule = null;
                    that.onClickModuleIndex = null;
                    that.tempIndex = null;
                    that.selectedKeys = [];
                    that.selectedRows = [];
                    that.activeKey = '1';
                    that.animit = false;
                    setTimeout(() => {
                        that.editFormVisible = false;
                    }, 1000)
                },
                onCancel () { },
            })
        },
        saveForm () {
            //保存表单
            console.log(this.viewArray);
            //活动名称，活动id
            if (!this.activityId) {
                this.$message.warning('活动名称必须选择');
                this.activeKey = '2';
                return;
            }
            this.activityData = this.activityList.filter(d => d.id == this.activityId)[0];//活动数据
            this.activityName = this.activityData.activityTitle;

            let mainData = this.viewArray[0];//第一条数据是表单标题数据
            let listData = this.viewArray.filter((item, index) => index > 0);
            console.log(listData, mainData);
            //数组重组
            let postData = {
                id: this.formId ? this.formId : null,
                activityName: this.activityName,//活动名称
                activityId: this.activityId,//活动id
                beginDate: this.activityData.startTime,//开始时间
                endDate: this.activityData.endTime,//结束时间
                bgImg: mainData.background,//背景图
                bgColor: mainData.bgColor,//标题字体颜色
                isSms: null,  //是否发送短信验证码 0否1是
                logo: mainData.logo,//logo
                businessTitle: null,//商机标题
                fields: [
                    // {
                    //     formId: null,//表单id
                    //     isSearch: 0,//是否作为条件查询 1:是 0:否
                    //     length: 16,//输入框字段长度
                    //     name: null,//字段名称
                    //     onEdit: 1,//是否可以编辑（0：否，1：是（默认））
                    //     onFill: 0,//是否必填（0：否，1：是）
                    //     remarks: null,//描述
                    //     sort: null,//排序
                    //     type: null,//字段分类
                    //     val: {}//字段值
                    // }
                ],
                formName: this.formName,//表单名称
                title: mainData.title,//表头名称
                status: 0,//状态0未邀约 1:已邀约
                remarks: mainData.remarks,//描述
            }

            if (!this.formName) {
                this.$message.warning('表单名称必须填写');
                return;
            }
            if (!mainData.title || mainData.title == "可编辑页面标题") {
                this.$message.warning('页面标题必须填写');
                return;
            }
            // if (!mainData.logo) {
            //     this.$message.warning('必须上传页面logo');
            //     return;
            // }

            let isName = false;
            let isPhone = false;
            let isCompany = false;
            for (let i = 0; i < listData.length; i++) {
                if (listData[i].type == 'name') {
                    isName = true;
                }
                if (listData[i].type == 'phone') {
                    isPhone = true;
                }
                if (listData[i].type == 'company') {
                    isCompany = true;
                }
            }
            if (!isName) {
                this.$message.warning('必须要存在联系人姓名组件');
                return;
            }
            if (!isPhone) {
                this.$message.warning('必须要存在联系人手机组件');
                return;
            }
            if (!isCompany) {
                this.$message.warning('必须要存在公司组件');
                return;
            }

            listData.forEach((item, index) => {
                postData.fields[index] = {
                    formId: this.formId ? this.formId : null,//表单id
                    isSearch: 0,//是否作为条件查询 1:是 0:否
                    length: item.maxLength,//输入框字段长度
                    name: item.title,//字段名称
                    onEdit: item.onEdit ? 1 : 0,//是否可以编辑（0：否，1：是（默认））
                    onFill: item.onFill ? 1 : 0,//是否必填（0：否，1：是）
                    onOff: true,//是否显示
                    remarks: item.remarks ? item.remarks : null,//描述
                    sort: index + 1,//排序
                    type: item.type,//字段分类
                    val: {
                        scope: item.scope ? item.scope : [],           //数字范围
                        src: item.src ? item.src : null,              //图片地址
                        href: item.href ? item.href : null,             //图片连接 
                        onPadding: item.onPadding,        //是否有边距
                        data: item.data ? item.data : [],               //基本数据
                        text: item.text ? item.text : null,               //文本内容,超链接,图片显示文字
                        borderWidth: item.borderWidth ? item.borderWidth : 1,    //分割线粗细
                        borderColor: item.borderColor ? item.borderColor : null,    //分割线颜色
                        timeDate: item.timeDate ? item.timeDate : null,         //活动日期
                    },//字段值
                    style: item.style ? item.style : {},          //样式（描述样式）
                }
                postData.fields[index].val = JSON.stringify(postData.fields[index].val);

                //置入是否需要发送短信
                if (item.type == 'phone') {
                    postData.isSms = item.isSms;
                }
            });




            console.log(postData);
            saveFrom(postData).then(res => {
                if (res.code === 200) {
                    this.$message.success(`“${this.formName}” 表单保存成功`);
                    setTimeout(() => {
                        this.editFormVisible = false;
                    }, 1000)
                    this.animit = false;
                    this.selectedRows = [];
                    this.selectedKeys = [];
                    this.getListData();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },



        add () {
            //新增
            //选活动
            this.formId = null;
            this.selectedKeys = [];
            this.selectedRows = [];
            this.viewArray = [
                {
                    type: "header",//显示的组件
                    title: "可编辑页面标题",//页面标题
                    logo: '',//表单logo
                    remarks: '这里是描述',//描述
                    onEdit: false,//是否可编辑
                    data: {},//数据
                    onOff: true,//是否显示
                    background: '',
                    prompt: '提交成功',//用户提交后显示的文字
                    style: {},//样式
                    maxLength: 10,//输入框最多输入字符
                    text: '',//文本类型需要
                    status: 1,//状态(1:正常 2:拖动中)
                    bgColor: '#666',//标题字体颜色
                },
            ];
            //限制联系人组件只能添加一次
            this.moduleList.forEach(list => {
                if (list.group == 2) {
                    list.status = 0;
                }
                if (list.type == 'invitedate') {
                    list.status = 1;
                }
            });
            this.formName = null;
            this.activityData = [];
            this.activityId = null;
            this.activityName = null;
            // this.choiceVisible = true;
            this.activeKey = '2';
            this.editFormVisible = true;
            this.animit = true;
        },
        search () {
            //查询
        },
        handleChange (value) {
            console.log(`selected ${value}`);
        },
        handleBlur () {
            console.log('blur');
        },
        handleFocus () {
            console.log('focus');
        },
        filterOption (input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        selectionChange (key, row) {
            this.selectedKeys = key;
            this.selectedRows = row;
            this.formId = key[0];
        },
        getListData () {
            //获取表单数据列表
            this.loading = true;
            let requestData = {
                current: 1,
                size: 20,
            }
            let searchData = Object.assign(this.requestData, requestData);
            console.log(searchData)
            getListFrom(searchData).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.records;
                    this.dataSource.forEach(item => {
                        item.key = item.id;
                    });
                }
                this.loading = false;
            }).catch(res => {
                this.loading = false;
            })
        },
        deleteFrom () {
            if (this.selectedKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return
            }
            let that = this;
            //获取表单数据列表
            this.$confirm({
                title: '提示',
                content: '是否确认删除该表单',
                onOk () {
                    removeFrom({ formId: that.selectedKeys[0] }).then(res => {
                        if (res.code === 200) {
                            that.$message.success('删除表单成功');
                            that.getListData();
                            that.selectedKeys = [];
                            that.selectedRows = [];
                        }
                    })
                },
                onCancel () { },
            })
        },
        editFilesFrom () {
            //获取字段设计数据
            if (this.selectedKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return
            }
            this.activeKey = '2';
            //限制联系人组件只能添加一次
            this.moduleList.forEach(list => {
                if (list.group == 2) {
                    list.status = 0;
                }
                if (list.type == 'invitedate') {
                    list.status = 0;
                }
            });
            getFilesDetail({ id: this.selectedKeys[0] }).then(res => {
                if (res.code === 200) {
                    let first = this.selectedRows[0];
                    this.viewArray = [
                        {
                            type: "header",//显示的组件
                            title: first.title,//页面标题
                            logo: first.logo,//表单logo
                            remarks: first.remarks,//描述
                            data: {},//数据
                            onOff: true,//是否显示
                            background: first.bgImg,
                            bgColor: first.bgColor,//标题字体颜色
                            prompt: '提交成功',//用户提交后显示的文字
                            style: {},//样式
                            maxLength: 10,//输入框最多输入字符
                            text: '',//文本类型需要
                            status: 1,//状态(1:正常 2:拖动中)
                        }];
                    res.data.fields.forEach(item => {
                        console.log(item.type,)
                        //限制联系人组件只能添加一次
                        this.moduleList.forEach(list => {
                            if (item.type == list.type && list.group == 2) {
                                list.status = 1;
                            }
                            if (item.type == 'invitedate' && item.type == list.type) {
                                console.log('asdfsadfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', item.type)
                                list.status = 1;
                            }
                        });

                        let val = JSON.parse(item.val);
                        // console.log(val);
                        let obj = {
                            isSms: first.isSms,        //是否发送短信验证码 0否1是
                            type: item.type,    // 组件类型
                            title: item.name,        //标题
                            onEdit: item.onEdit,       //是否可编辑
                            onFill: item.onFill,       //是否必填
                            onOff: item.onOff,        //是否显示
                            style: item.style,          //样式（描述样式）
                            maxLength: item.length,    //输入框字符长度
                            text: val.text ? val.text : null,           //文本内容,超链接,图片显示文字
                            scope: val.scope,           //数字范围
                            data: val.data,           //基本数据
                            src: val.src,             //图片地址
                            href: val.href,            //图片连接 
                            onPadding: val.onPadding,       //是否有边距
                            borderWidth: val.borderWidth,    //分割线粗细
                            borderColor: val.borderColor,    //分割线颜色
                            timeDate: `${first.beginDate} ~ ${first.endDate}`,         //活动日期
                        }
                        this.viewArray.push(obj);
                    });
                    this.formId = this.selectedKeys[0];
                    this.formName = first.formName;
                    this.activityId = first.activityId;
                    this.activityName = first.activityName;
                    this.editFormVisible = true;
                    this.animit = true;
                }
            })
        },

        handleShare (id) {
            //分享
            console.log(this.$route, location.origin);
            this.formId = id;
            this.shareVisible = true;
            this.creatQrCode();
        },
        // 复制
        onCopy () {
            this.$copyText(window.location.origin + '/activity?id=' + this.formId + '&shareUserId=' + this.userInfo.id).then(res => {
                this.$message.success("复制成功！");
            }).catch(err => {
                this.$message.error("抱歉，复制失败！");
            });
        },
        //生成二维码
        creatQrCode () {
            this.$nextTick(() => {
                let aa = new QRCode(this.$refs.qrCodeUrl, {
                    text: window.location.origin + '/activity?id=' + this.formId + '&shareUserId=' + this.userInfo.id, // 需要转换为二维码的内容
                    width: 100,
                    height: 100,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
            })

        },
        handleSearch (selectedKeys, confirm, dataIndex) {
            //搜索
            console.log(selectedKeys, confirm, dataIndex)
            confirm();
            // this.searchText = selectedKeys[0];
            // this.searchedColumn = dataIndex;
            this.requestData[dataIndex] = selectedKeys[0];
            console.log(this.requestData)
            this.getListData();
        },
        handleResetSearch (clearFilters, code) {
            console.log(clearFilters, code)
            //重置
            clearFilters();
            this.requestData[code] = null;
            this.getListData();
        },
    },
}
</script>

<style lang="less">
    @import '~@/style/crm.less';
    .invite-table {
        margin: 10px 10px 0;
        .shart-class {
            cursor: pointer;
            color: #007bff;
        }
    }
    .view-filter {
        // filter: blur(0.8px);
        // -webkit-filter: blur(0.8px);
        // -moz-filter: blur(0.8px);
        // -ms-filter: blur(0.8px);
        // -o-filter: blur(0.8px);
        opacity: 0.6;
    }
    .sortable-chosen,
    .sortable-ghose {
        opacity: 1 !important;
    }
    .edit-from-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(250, 248, 248);
        filter: blur(2);
        z-index: 100;
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;

        .content-edit-box {
            .edit-top-box {
                height: 44px;
                background: #fff;
                border-bottom: 1px solid #ccc;
                text-align: right;
                padding-top: 6px;
                .edit-top-btn {
                    .btn {
                        margin-right: 15px;
                    }
                }
            }
            .edit-content-operation {
                display: flex;
            }
            .phone-view {
                flex: 1;
                position: relative;
                border: 1px solid #faf8f8;
                height: calc(100vh - 44px);
                overflow-y: auto;
                .phone-img {
                    margin: 0 auto;
                    width: 382px;
                    height: 762px;
                }
                .view-content {
                    position: absolute;
                    top: 86px;
                    left: 50%;
                    margin-left: -166px;
                    width: 326px;
                    height: 582px;
                    overflow: hidden;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        width: 4px;
                        height: 4px;
                    }
                    .view-header {
                        position: relative;
                        width: 100%;
                        z-index: 6;
                        height: 100px;
                        display: table;
                        // background: url('~@/assets/mobile-top.png') no-repeat;
                        background-size: contain;
                        border: 1px solid #fff;
                        &:hover {
                            border: 1px dashed #666;
                            box-sizing: border-box;
                        }
                        .view-title {
                            position: absolute;
                            top: 16px;
                            right: 6px;
                            font-size: 16px;
                            font-weight: bold;
                            text-align: left;
                            z-index: 5;
                            width: 68%;
                            letter-spacing: 1px;
                        }
                        .view-remark {
                            position: absolute;
                            top: 39px;
                            right: 6px;
                            font-size: 12px;
                            text-align: left;
                            z-index: 5;
                            color: #888;
                            width: 68%;
                            letter-spacing: 1px;
                        }
                        .view-img-upload {
                            position: absolute;
                            display: table-cell;

                            left: 8px;
                            top: 10px;
                            width: 80px;
                            height: 80px;
                            overflow: hidden;
                            font-size: 56px;
                            z-index: 5;
                            img {
                                vertical-align: super;
                            }
                            .view-logo {
                                width: 100%;
                                max-height: 80px;
                                border-style: none;
                            }
                        }
                    }
                    .view-header-active {
                        border: 1px dashed #007bff;
                        &:hover {
                            border: 1px dashed #007bff;
                            box-sizing: border-box;
                        }
                    }
                    .view-component {
                        position: relative;
                        .view-mask {
                            position: absolute;
                            left: 0;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            width: 100%;
                            height: 100%;
                            cursor: move;
                            z-index: 2;
                            .view-close {
                                display: none;
                                font-size: 12px;
                                text-align: center;
                                position: absolute;
                                right: 1px;
                                top: 1px;
                                width: 13px;
                                height: 13px;
                                line-height: 9px;
                                z-index: 3;
                                border-radius: 2px;
                                color: #fff;
                                background: red;
                                cursor: pointer;
                            }
                        }
                        .view-mask-click {
                            position: absolute;
                            left: 0;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                            z-index: 2;
                            border: 1px dashed #007bff;
                            box-sizing: border-box;
                            .view-close {
                                display: block;
                                font-size: 12px;
                                text-align: center;
                                position: absolute;
                                right: 1px;
                                top: 1px;
                                width: 13px;
                                height: 13px;
                                line-height: 9px;
                                z-index: 3;
                                border-radius: 2px;
                                color: #fff;
                                background: red;
                            }
                        }
                    }
                    .view-move {
                        .view-mask {
                            border: 1px dashed #666;
                            box-sizing: border-box;
                            .view-close {
                                display: block;
                            }
                        }
                    }
                    .tips-box {
                        margin: 200px 0px;
                        font-size: 18px;
                        color: #bbb;
                        text-align: center;
                    }

                    .chosen {
                        opacity: 1;
                        box-shadow: 5px 1px 7px #666 !important;
                    }

                    .ghost {
                        opacity: 1;
                        box-shadow: 5px 1px 7px #666 !important;
                    }
                }
                .btn-bbox {
                    width: 100%;
                    margin-top: 20px;
                    .btn {
                        text-align: center;
                        width: 326px;
                        margin: 0 auto;
                    }
                    .btn-submit {
                        width: 50%;
                    }
                }
            }
            .choice-module-box {
                flex: 0 0 400px;
                height: calc(100vh - 44px);
                overflow: auto;
                background: #e9eff3;
                border-left: 1px solid #ccc;
                border-right: 1px solid #ccc;
                .ant-tabs-bar {
                    margin-bottom: 0px !important;
                }
                .content-box {
                    background: #e9eff3;
                    padding: 10px;
                    .item-ul {
                        width: 100%;
                        padding: 0;
                        list-style: none;
                        display: flex;
                        flex-wrap: wrap;
                        text-align: center;
                        background: #fff;
                        .icon-btn {
                            margin-top: 1px;
                        }
                        li {
                            flex: auto;
                            width: 25%;
                            height: 50px;
                            line-height: 50px;
                            border: 1px solid #fff;
                            border-right: 1px solid #ccc;
                            border-bottom: 1px solid #ccc;
                            min-width: 25%;
                            max-width: 25%;
                            position: relative;
                            text-align: center;
                        }
                        li:hover {
                            border: 1px solid #007bff;
                            cursor: pointer;
                            color: #007bff;
                        }
                    }
                }
                .module-null {
                    height: 400px;
                    letter-spacing: 1px;
                    font-size: 18px;
                    color: #bbb;
                    text-align: center;
                    margin-top: 100px;
                    .ico {
                        font-size: 60px;
                    }
                }
            }
        }
    }
    .edit-main-wrapper {
        .ant-divider-horizontal {
            margin: 8px 0px;
        }
    }
    .share-modal-box {
        text-align: center;
        img {
            margin: 0 auto;
        }
        .btn {
            margin-top: 10px;
        }
    }
    .form-model-box {
        .ant-form-item {
            margin: 0px;
        }
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
    }
</style>
